{% extends "base.html" %}
{% block title %}客户管理{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-people-fill"></i> 客户管理</h2>
    <a href="{{ url_for('admin_add_customer') }}" class="btn btn-primary">
        <i class="bi bi-plus-circle"></i> 添加客户
    </a>
</div>

<!-- 查询表单 -->
<div class="card mb-4">
    <div class="card-header">高级查询</div>
    <div class="card-body">
        <form method="GET" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">查询类型</label>
                <select name="search_type" class="form-select">
                    <option value="">-- 选择查询类型 --</option>
                    <option value="exact" {% if search_type=='exact' %}selected{% endif %}>精确查询</option>
                    <option value="fuzzy" {% if search_type=='fuzzy' %}selected{% endif %}>模糊查询</option>
                    <option value="range" {% if search_type=='range' %}selected{% endif %}>范围查询</option>
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label">查询字段</label>
                <select name="search_field" class="form-select">
                    <option value="">-- 选择字段 --</option>
                    <option value="name" {% if search_field=='name' %}selected{% endif %}>客户姓名</option>
                    <option value="phone" {% if search_field=='phone' %}selected{% endif %}>电话号码</option>
                    <option value="pid" {% if search_field=='pid' %}selected{% endif %}>身份证号</option>
                    <option value="id" {% if search_field=='id' %}selected{% endif %}>客户ID</option>
                </select>
            </div>

            <div class="col-md-3" id="searchValueContainer">
                <label class="form-label">查询值</label>
                <input type="text" name="search_value" class="form-control"
                       value="{{ search_value }}" placeholder="输入查询值">
            </div>

            <div class="col-md-3 d-none" id="rangeContainer">
                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label">最小值</label>
                        <input type="number" name="min_value" class="form-control"
                               value="{{ min_value }}" placeholder="最小值">
                    </div>
                    <div class="col-6">
                        <label class="form-label">最大值</label>
                        <input type="number" name="max_value" class="form-control"
                               value="{{ max_value }}" placeholder="最大值">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <button type="submit" class="btn btn-primary me-2">
                    <i class="bi bi-search"></i> 查询
                </button>
                <a href="{{ url_for('admin_customers') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-counterclockwise"></i> 重置
                </a>
            </div>
        </form>
    </div>
</div>

<!-- 客户列表表格 -->
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>身份证号</th>
                        <th>电话</th>
                        <th>地址</th>
                        <th>银行卡数</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for customer in customers %}
                    <tr>
                        <td>{{ customer.customerID }}</td>
                        <td>{{ customer.customerName }}</td>
                        <td>{{ customer.PID }}</td>
                        <td>{{ customer.telephone }}</td>
                        <td>{{ customer.address or '-' }}</td>
                        <td>
                            <span class="badge bg-primary rounded-pill">
                                {{ customer.card_count }}
                            </span>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ url_for('admin_edit_customer', customer_id=customer.customerID) }}"
                                   class="btn btn-outline-warning"
                                   data-bs-toggle="tooltip" title="编辑">
                                    <i class="bi bi-pencil-square"></i>
                                </a>
                                <a href="{{ url_for('admin_delete_customer', customer_id=customer.customerID) }}"
                                   class="btn btn-outline-danger confirm-action"
                                   data-bs-toggle="tooltip" title="删除"
                                   data-message="确定删除客户 {{ customer.customerName }} 吗？这将删除所有关联的银行卡！">
                                    <i class="bi bi-trash"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="text-center text-muted">暂无客户数据</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 分页 -->
    {% if pagination and pagination.pages > 1 %}
    <div class="card-footer">
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center mb-0">
                {% if pagination.has_prev %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('admin_customers',
                        page=pagination.prev_num,
                        search_type=request.args.get('search_type'),
                        search_field=request.args.get('search_field'),
                        search_value=request.args.get('search_value'),
                        min_value=request.args.get('min_value'),
                        max_value=request.args.get('max_value')) }}">
                        &laquo;
                    </a>
                </li>
                {% endif %}

                {% for page in range(1, pagination.pages + 1) %}
                <li class="page-item {% if page == pagination.page %}active{% endif %}">
                    <a class="page-link" href="{{ url_for('admin_customers',
                        page=page,
                        search_type=request.args.get('search_type'),
                        search_field=request.args.get('search_field'),
                        search_value=request.args.get('search_value'),
                        min_value=request.args.get('min_value'),
                        max_value=request.args.get('max_value')) }}">
                        {{ page }}
                    </a>
                </li>
                {% endfor %}

                {% if pagination.has_next %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('admin_customers',
                        page=pagination.next_num,
                        search_type=request.args.get('search_type'),
                        search_field=request.args.get('search_field'),
                        search_value=request.args.get('search_value'),
                        min_value=request.args.get('min_value'),
                        max_value=request.args.get('max_value')) }}">
                        &raquo;
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}
</div>

<script>
// 查询类型切换
document.querySelector('[name="search_type"]').addEventListener('change', function() {
    const searchType = this.value;
    const searchValueContainer = document.getElementById('searchValueContainer');
    const rangeContainer = document.getElementById('rangeContainer');

    if (searchType === 'range') {
        searchValueContainer.classList.add('d-none');
        rangeContainer.classList.remove('d-none');
    } else {
        searchValueContainer.classList.remove('d-none');
        rangeContainer.classList.add('d-none');
    }
});

// 初始化显示状态
document.addEventListener('DOMContentLoaded', function() {
    const searchType = '{{ search_type }}';
    if (searchType === 'range') {
        document.getElementById('searchValueContainer').classList.add('d-none');
        document.getElementById('rangeContainer').classList.remove('d-none');
    }

    // 初始化工具提示
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});

// 删除确认
document.querySelectorAll('.confirm-action').forEach(link => {
    link.addEventListener('click', function(e) {
        if (!confirm(this.dataset.message)) {
            e.preventDefault();
        }
    });
});
</script>
{% endblock %}